import React, { Component } from 'react';

import { Card, Spin, Icon, Alert } from 'antd';
import './style.less';

export default class Loadings extends Component{
	render(){
		const icon = <Icon type="loading" style={{fontSize: 24}} />;
		return (
			<div>
				<Card title="Spin用法">
					<Spin size="small" />
					<Spin style={{margin: '0 20px'}} />
					<Spin size="large" />
					<Spin indicator={icon} style={{ margin: '0 20px' }}  spinning={ true }/>
				</Card>
				<Card title="内容遮罩">
					<Alert
						message="react"
						description="欢迎来到后台管理系统"
						type="info"
					 />
					 <Alert
						message="react"
						description="欢迎来到后台管理系统"
						type="warning"
					 />
					 <Spin tip="加载中...">
					 	<Alert
						message="react"
						description="欢迎来到后台管理系统"
						type="info"
					 />
					 </Spin>
					 <Spin indicator={icon}>
					 	<Alert
						message="react"
						description="欢迎来到后台管理系统"
						type="warning"
					 />
					 </Spin>
				</Card>
			</div>
		);
	}
}